See here for the example code that generated this page

Gif Examples

This page demonstrates the interactive Gif chart type in JSPlots.



Example 1: Basic Gif from Directory Pattern

This example loads GIF files from a directory following the pattern: prefix!group1!group2!...!groupN.gif

The GIFs below were created with the pattern: animation!Region!Quarter.gif

Features:



Animated Plots by Region and Quarter

Use filters to switch between regions and quarters. Notice how the frame position is preserved when switching!

Filters

Frame 1 / 1
0.1s

Keyboard shortcuts: ← Prev Frame, → Next Frame, Space Play/Pause, L Toggle Loop



Example 2: Gif with Autoplay Enabled

This example demonstrates the autoplay feature. The GIF starts playing automatically when the page loads.

Try the following:

  1. Let it play automatically for a few frames
  2. Click "Pause" to stop it
  3. Use "Prev Frame" and "Next Frame" to navigate manually
  4. Change the filter to see a different animation (frame position will be preserved!)
  5. Adjust the speed slider to control playback speed
  6. Uncheck "Loop" to make it play only once


Autoplay Example - Spiral Animation

This GIF starts playing automatically. Try changing filters while it's playing!

Filters

Frame 1 / 1
0.08s

Keyboard shortcuts: ← Prev Frame, → Next Frame, Space Play/Pause, L Toggle Loop



Example 3: Fast Animation with Short Delay

This example uses a very short delay (0.05s) for rapid playback.

The speed slider allows you to adjust from 0.05s to 5s per frame using a logarithmic scale.



Fast Animation - Cosine Wave

This animation plays quickly. Use the speed slider to slow it down if needed.

Filters

Frame 1 / 1
0.05s

Keyboard shortcuts: ← Prev Frame, → Next Frame, Space Play/Pause, L Toggle Loop



Summary

The Gif chart type provides:

Use Cases

This page was created using JSPlots.jl.